.switch {
  border: var(--border) solid #0000;
  color: var(--color-base-100);
  @apply relative inline-grid shrink-0 cursor-pointer appearance-none place-content-center align-middle select-none print:[outline:.25rem_solid];
  grid-template-columns: 0fr 1fr 1fr;
  padding: var(--switch-p);
  box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;
  background-color: var(--input-color);

  --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
  border-radius: calc(
    var(--radius-selector) + min(var(--switch-p), var(--radius-selector-max)) +
      min(var(--border), var(--radius-selector-max))
  );

  transition:
    color 0.3s,
    grid-template-columns 0.2s;
  --input-color: color-mix(in oklab, var(--color-neutral) 22%, #0000);
  --switch-p: 0.1875rem;
  --size: calc(var(--size-selector, 0.25rem) * 6);
  width: calc((var(--size) * 2) - (var(--border) + var(--switch-p)) * 2);
  height: var(--size);

  &:before {
    @apply rounded-selector relative start-0 col-start-2 row-start-1 aspect-square h-full bg-current print:[outline:.25rem_solid] print:[outline-offset:-1rem];
    translate: 0;
    --tw-content: "";
    content: var(--tw-content);
    transition:
      background-color 0.1s,
      translate 0.2s,
      inset-inline-start 0.2s;
    box-shadow:
      0 -1px oklch(59.99% 0 0 / calc(var(--depth) * 0.08)) inset,
      0 8px 0 -4px oklch(59.99% 0 0 / calc(var(--depth) * 0.08)) inset,
      0 1px 2px 0 oklch(0% 0 0 / 0.2);
    background-size: auto, calc(var(--noise) * 100%);
    background-image: none, var(--fx-noise);
    @media (forced-colors: active) {
      @apply outline -outline-offset-1;
    }
  }

  &:focus-visible,
  &:has(:focus-visible) {
    outline: 2px solid color-mix(in oklab, var(--input-color, var(--color-neutral)) 30%, #0000);
    outline-offset: 0px;
  }

  &:checked,
  &[aria-checked="true"],
  &:has(> input:checked) {
    grid-template-columns: 1fr 1fr 0fr;
    --input-color: var(--color-neutral);
    background-color: var(--input-color);

    &:before {
      @apply bg-current;

      @starting-style {
        opacity: 0;
      }
    }
  }

  &:indeterminate {
    grid-template-columns: 0.5fr 1fr 0.5fr;
  }

  &:disabled {
    @apply cursor-not-allowed opacity-50;

    &:before {
      @apply bg-transparent;
    }
  }
}

/* Variant */

.switch-outline {
  background-color: color-mix(in oklab, var(--color-neutral) 22%, #0000);
  color: var(--input-color);

  &::before {
    background-color: var(--color-base-100);
    box-shadow:
      0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
      0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
      0 1px 2px 0 oklch(0% 0 0 / 0.2);
  }

  &:checked,
  &[aria-checked="true"],
  &:has(> input:checked) {
    grid-template-columns: 1fr 1fr 0fr;
    color: var(--input-color);
    background-color: var(--color-base-100);
    border-color: var(--input-color);

    &:before {
      @apply bg-current;

      @starting-style {
        opacity: 0;
      }
    }
  }
}

/* Sizes */

.switch-primary {
  &:checked,
  &[aria-checked="true"] {
    --input-color: var(--color-primary);
  }
}

.switch-secondary {
  &:checked,
  &[aria-checked="true"] {
    --input-color: var(--color-secondary);
  }
}

.switch-accent {
  &:checked,
  &[aria-checked="true"] {
    --input-color: var(--color-accent);
  }
}

.switch-success {
  &:checked,
  &[aria-checked="true"] {
    --input-color: var(--color-success);
  }
}

.switch-warning {
  &:checked,
  &[aria-checked="true"] {
    --input-color: var(--color-warning);
  }
}

.switch-info {
  &:checked,
  &[aria-checked="true"] {
    --input-color: var(--color-info);
  }
}

.switch-error {
  &:checked,
  &[aria-checked="true"] {
    --input-color: var(--color-error);
  }
}

/* responsive */

.switch-xs {
  &:is([type="checkbox"]),
  &:has([type="checkbox"]) {
    --switch-p: 0.125rem;
    --size: calc(var(--size-selector, 0.25rem) * 4);
  }
}

.switch-sm {
  &:is([type="checkbox"]),
  &:has([type="checkbox"]) {
    --switch-p: 0.125rem;
    --size: calc(var(--size-selector, 0.25rem) * 5);
  }
}

.switch-md {
  &:is([type="checkbox"]),
  &:has([type="checkbox"]) {
    --switch-p: 0.1875rem;
    --size: calc(var(--size-selector, 0.25rem) * 6);
  }
}

.switch-lg {
  &:is([type="checkbox"]),
  &:has([type="checkbox"]) {
    --switch-p: 0.25rem;
    --size: calc(var(--size-selector, 0.25rem) * 7);
  }
}

.switch-xl {
  &:is([type="checkbox"]),
  &:has([type="checkbox"]) {
    --switch-p: 0.3125rem;
    --size: calc(var(--size-selector, 0.25rem) * 8);
  }
}
